<template>
	<view class="search-cont" @click="disabled? onClick() : ''">
		<view class="search">
			<image src="/static/search.png"></image>
			<input  
				type="text" 
				:placeholder="hint" 
				placeholder-style="color: #999;" 
				:value="value"
				:disabled="disabled"
				:focus="focus"
				/>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		hint: {
			type: String,
			default: '请输入关键词搜索（例：星巴克）'
		},
		value: {
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		focus: {
			type: Boolean,
			default: false
		},
		type: {
			type: String,
			default: 'buy'
		}
	},
	data() {
		return {};
	},
	methods: {
		onClick() {
			this.onGoNext(`/pages/Column/Search/Search?type=${this.type}`)
			this.$emit('search')
		}
	}
};
</script>

<style lang="scss" scoped>
.search-cont {
	background-color: #fff;
}

.search {
	height: 70upx;
	width: 90%;
	margin: 10upx auto 20upx;
	background: #f1f1f1;
	border-radius: 35upx;
	display: flex;
	align-items: center;
	padding: 0 20upx;
	box-sizing: border-box;
}

.search > image {
	width: 35upx;
	height: 35upx;
	margin-right: 20upx;
}

.search > input {
	flex: 1;
	font-size: 28upx;
	font-family: 'Visby CF';
}
</style>
